<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    System.out.println(path);
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>ActiveMQ与Spring整合实例</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <script type="text/javascript" src="<%=basePath%>static/jquery-1.11.0.min.js"></script>
    <style type="text/css">
        .h1 {
            margin: 0 auto;
        }

        #producer {
            width: 600px;
            height: 230px;
            align: center;
            margin: 0 auto;
        }

        body {
            text-align: center;
        }

        div {
            text-align: center;
        }

        textarea {
            width: 80%;
            height: 100px;
            border: 1px solid gray;
        }

        button {
            background-color: rgb(62, 156, 66);
            border: none;
            font-weight: bold;
            color: white;
            height: 30px;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">

        function send(controller) {
            if ($("#message").val() == "") {
                $("#message").css("border", "1px solid red");
                return;
            } else {
                $("#message").css("border", "1px solid gray");
            }
            $.ajax({
                type: 'post',
                url: '<%=basePath%>activemq/' + controller,
                dataType: 'text',
                data: {"message": $("#message").val()},
                success: function (data) {
                    if (data == "suc") {
                        $("#status").html("<font color=green>发送成功</font>");
                        setTimeout(clear, 1000);
                    } else {
                        $("#status").html("<font color=red>" + data + "</font>");
                        setTimeout(clear, 5000);
                    }
                },
                error: function (data) {
                    $("#status").html("<font color=red>ERROR:" + data["status"] + "," + data["statusText"] + "</font>");
                    setTimeout(clear, 5000);
                }

            });
        }

        function clear() {
            $("#status").html("");
        }

    </script>
</head>

<body>
<h1>Hello ActiveMQ</h1>
<div id="producer">
    <h2>Producer</h2>
    <textarea id="message" style="resize: none;"></textarea>
    <p>
        <button onclick="send('queueSender')">发送Queue消息</button>
        <button onclick="send('topicSender')">发送Topic消息</button>
    </p>
    <span id="status"></span>
</div>
</body>
</html>
